<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    :collapse="bool"
    :router="true"
    unique-opened
    active-text-color="#ffd04b"
  >
    <el-menu-item index="/home/shouye">
    <!-- <el-menu-item index="1" @click="shouye()"> -->
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>业主管理</span>
      </template>
      <el-menu-item-group class="yzxx">
        <el-menu-item index="/home/chakan" @click="addTab(textd)">
          <i class="el-icon-view" style="color: grey; margin-right: 10px"></i
          >业主信息管理</el-menu-item
        >
        <el-menu-item index="/home/xiugai" @click="addTab(texte)">
          <i
            class="el-icon-picture-outline-round"
            style="color: grey; margin-right: 10px"
          ></i
          >宠物信息管理</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-star-off"></i>
        <span>收费管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/home/PersonFeeManagement" @click="addTab(textf)">
          <i class="el-icon-user"></i>
          物业费管理
        </el-menu-item>
        <el-menu-item index="/home/WaterChargeManagement" @click="addTab(textg)">
          <i class="el-icon-heavy-rain"></i>水费管理</el-menu-item
        >

        <el-menu-item index="/home/electric" @click="addTab(texth)">
          <i class="el-icon-s-opportunity"></i>电费管理</el-menu-item
        >
        <el-menu-item index="/home/parking" @click="addTab(texti)">
          <i class="el-icon-truck"></i>停车费管理</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-s-tools"></i>
        <span>维修管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/home/weixiu" @click="addTab(texta)"
          ><i class="el-icon-success"></i>已维修列表</el-menu-item
        >
        <el-menu-item index="/home/nowei" @click="addTab(textb)"
          ><i class="el-icon-error"></i>未维修列表</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-s-home"></i>
        <span>房屋管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/home/fangwu" @click="addTab(textj)"
          >房屋列表</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="6">
      <template slot="title">
        <i class="el-icon-s-custom"></i>
        <span>员工管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/home/worker" @click="addTab(textc)"
          ><i class="el-icon-user"></i>员工列表</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
    data() {
    return {
      texta: "已维修列表",
      textb: "未维修列表",
      textc: "员工列表",
      textd: "查看业主信息",
      texte: "修改业主信息",
      textf: "物业费管理",
      textg: "水费管理",
      texth: "电费管理",
      texti: "停车费管理",
      textj: "房屋列表",
    };
  },
  computed: {
    ...mapState({
      data: (state) => state.pm,
      bool: (state) => state.pm.bool,
      text: (state) => state.pm.editableTabs,
    }),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    ...mapMutations(["Add_Tab", "APP_UPDATA_BOOL"]),
    addTab(val) {
      // if(data)
      this.Add_Tab(val);
      // console.log(this.text);
      // for (var i = 0; i < this.text.length; i++) {
      //   if (
      //     this.text[i].title == "已维修列表"
      //   ) {
      //     // this.Add_Tab(val);
      //     console.log(1)
      //   } else{
      //     // this.Add_Tab(val);
      //     console.log(2)
      //   }

      // }
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>